import React from 'react';
import {Form, Input, Button, message} from 'antd';
import {updatePassword} from "@/services/user/user";

const ChangePassword = () => {
    const [form] = Form.useForm();

    const onFinish = (values) => {
      console.log('Received values of form: ', values);
      // 在这里添加代码来处理密码修改逻辑
      const params = {
        oldPassword: values.oldPassword,
        newPassword: values.newPassword,
      };

      updatePassword(params).then(res => {
        if (res.code === 1) {
          message.success('修改密码成功')
        } else {
          message.error('修改密码失败,' + res.msg)
        }
      })
    }

    const formStyle = {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'flex-start',  // 设置为 flex-start 来从顶部开始排列内容
      height: '100vh',
      paddingTop: '10vh',  // 将表单向下推10%的视口高度，可以根据需要调整
    };

    return (
      <div style={formStyle}>
        <Form
          form={form}
          name="changePassword"
          onFinish={onFinish}
          autoComplete="off"
          style={{width: '300px'}} // 设置一个固定宽度
          labelCol={{span: 8}}  // 标签占用8格
          wrapperCol={{span: 16}} // 输入框占用16格
        >
          <Form.Item
            name="oldPassword"
            label="旧密码"
            rules={[{required: true, message: '请输入旧密码!'}]}
          >
            <Input.Password/>
          </Form.Item>

          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[{required: true, message: '请输入新密码!'}]}
          >
            <Input.Password/>
          </Form.Item>

          <Form.Item
            name="confirmNewPassword"
            label="确认新密码"
            dependencies={['newPassword']}
            hasFeedback
            rules={[
              {required: true, message: '请确认新密码!'},
              ({getFieldValue}) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不匹配!'));
                },
              }),
            ]}
          >
            <Input.Password/>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              修改密码
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
;

export default ChangePassword;
